// pages/pubu/pubu.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        list: [],
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function(options) {
        this.getList();
        this.getAllRects();
    },

    getAllRects() {
        var self = this;
        //查询所有的类名为aaa的标签：
        wx.createSelectorQuery().selectAll('.aaa').boundingClientRect(function(rects) {
            // console.warn(rects);
            // rects.forEach(function (rect) {
            //     // rect.width   // 节点的宽度
            //     // rect.height  // 节点的高度
            //     console.warn(rect.height);
            // })
            //遍历数组集合---》获取的每个元素的高度
            var rectsHeight = rects.map((value, index) => {
                return value.height;
            });
            // console.warn(rectsHeight);

            //存储一行的高度，用来给下一行做绝对定位用的
            var heightArr = [];
            //遍历数组集合
            rects.map((value, index) => {
                if (index < 4) {
                    //如果是第一行图片，不需要设置定位，但是需要保存高度
                    heightArr.push(rectsHeight[index]);
                } else {
                    //如果不是第一行图片
                    //在高度数组中找到最小高度[当作这张图片的top定位值]
                    var minHeight = Math.min.apply(null, heightArr);
                    //在高度数组中找到最小高度的下标
                    var minIndex = heightArr.indexOf(minHeight);
                    //根据找到的下标，然后找到这个最小的div，并获取他的左定位[定位的left值]
                    // console.warn(minIndex);
                    // console.warn(rects[minIndex]);
                    var tempLeft = rects[minIndex].left;
                    var tempBottom = rects[minIndex].bottom;
                    // console.warn(tempLeft);
                    // console.warn(tempBottom);
                    //设置图片的定位
                    var list = self.data.list;
                    list[index].left = tempLeft;
                    //第5个元素开始，取上一行整体高度的最小高度[定位的top值]
                    list[index].top = minHeight;
                    list[index].isPubu = true;

                    //将高度数组中最小的高度，累加到当前的高度上
                    heightArr[minIndex] = heightArr[minIndex] + rects[index].height;

                    self.setData({
                        list: list,
                        heightArr: heightArr
                    });
                }
            });

        }).exec()
    },

    getList() {
        var self = this;
        var list = [{
                'height': 420,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 370,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 400,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 450,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 310,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 330,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 390,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 400,
                'isPubu': false,
                'left': 0,
                'top': 0,
            }
        ];
        var list2 = [{
                'height': 360,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 220,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 280,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 300,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 310,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 230,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 290,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 300,
                'isPubu': false,
                'left': 0,
                'top': 0,
            }
        ];
        list.push(...list2);
        self.setData({
            list: list
        });
    },

    addList() {
        var self = this;
        var list = self.data.list;
        var list2 = [{
                'height': 360,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 220,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 280,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 300,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 310,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 230,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 290,
                'isPubu': false,
                'left': 0,
                'top': 0,
            },
            {
                'height': 300,
                'isPubu': false,
                'left': 0,
                'top': 0,
            }
        ];
        list.push(...list2);
        self.setData({
            list: list
        });
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady: function() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function() {},

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom: function() {
        var self = this;
        wx.showLoading({
            title: '加载中',
        })
        setTimeout(function() {
            console.warn('onReachBottom');
            self.addList();
            self.getAllRects();
            wx.hideLoading();
        }, 1200);
    },
})